<template>
	<page-meta><navigation-bar title="订阅" front-color="#000000" background-color="#ffffff" /></page-meta>
	<view :style="{ 'min-height': height + 'px' }" style="background: #f1f1f1;">
		<view class="lst-item" style="padding: 15px;overflow: hidden;background: #fff;">
			<image  :src="obj.headPortrait" style="width: 60px;float: left; height: 60px;border: 1px solid #e5e5e5;margin-top: 2px;" mode=""></image>
			<view class="lst-cen" style="float: left;font-size: 13px;margin-left: 10px;">
				<view class="" style="font-size: 16px;padding-bottom: 6px;font-weight: 650;">
					{{obj.traderName}}
					
				</view>
				<view style="font-size: 13px;padding-bottom: 2px;">
					<text style="color: #ea7b4e;">{{obj.subPoint}}积分/手</text>
					<text style="color: #acacac;display: inline-block;padding-left: 5px;">跟随人数 <span style="color: #000000;padding-left: 5px;">{{obj.followTotalNum}}</span></text>
				</view>
				<view class="" style="color: #acacac;padding-bottom: 2px;">
					适应金额
					<text style="color: #000000;padding-left: 5px;">{{(obj.maxPosMargin)}}</text>
				</view>
			</view>
			<view class="lst-rig" style="float: right;text-align: right;">
				<view style="overflow: hidden;clear: both;margin-top: 27px;">
					<text style="display: block;float: right;clear: both;font-size: 14px;color: red;" :style="{color:obj.profit>0?'red':'green'}">
					<text style="color: #000;">{{obj.currencySymbol}}</text>{{obj.profit.toFixed(2)}}</text>
					<text style="display: block;float: right;clear: both;font-size: 14px;">账户盈亏</text>
				</view>
			</view>
		</view>
		<view class="lst" style="border-bottom: rgba(0,0,0,.6);background: #fff;margin-top: 20px;padding: 10px 15px;border-bottom: 1px solid #e5e5e5;">
			<uni-text>选择跟随账号</uni-text>
		</view>
		<view  @tap="nowid=1;open()" class="lst" style="background: #fff;padding: 6px 15px;height: 40px;line-height: 40px;">
			<image src="/static/img/loginlog.png" style="width: 30px;height: 30px; float: left;margin-top: 5px;margin-right: 10px;" mode=""></image>
			<uni-text>{{inititems.name}}</uni-text>
			<image src="/static/img/xiala.png" style="float: right;width: 16px; height: 14px;margin-top: 13px;" mode=""></image>
		</view>
		
		
		<view class="lst" style="background: #fff;margin-top: 20px;padding: 10px 15px;border-bottom: 1px solid #e5e5e5;">
			<uni-text>设置跟单方式</uni-text>
		</view>
		<view style="background: #fff;margin-bottom:20px;">
			<view class="top" style="border-bottom: 1px solid #e5e5e5;">
				<view :class="{active:gtype==1}" @tap="gtype=1">
					<span style="margin-left: 15px;"></span>
					传统跟单
				</view>
				<view :class="{active:gtype==2}" @tap="chongtong(1)">
					<span></span>
					策略跟单
				</view>
			</view>
			<view class="ctong" v-if="gtype==1" style="padding: 0 15px;">
				<view class="" style="line-height: 35px;height: 35px;margin-top: 22px;" @tap="nowid=2;open()">
					<span style="display: block;float: left;width: 80px;text-align: left;">跟单方向</span>
					<view class="" style="float: left;height: 35px;border: 1px solid #e4e4e4;width: calc(100% - 85px);box-sizing: border-box;text-indent: 10px;">
						<text>{{items.name}}</text>
						<image src="/static/img/xiala.png" style="float: right;width: 16px; height: 14px;margin-top: 11px;margin-right: 10px;" mode=""></image>
					</view>
				</view>
				<view class="" style="line-height: 35px;height: 35px;margin-top: 22px;" @tap="nowid=3;open()">
					<span style="display: block;float: left;width: 80px;text-align: left;">跟单策略</span>
					<view class="" style="float: left;height: 35px;border: 1px solid #e4e4e4;width: calc(100% - 85px);box-sizing: border-box;text-indent: 10px;">
						<text>{{items1.name}}</text>
						<image src="/static/img/xiala.png" style="float: right;width: 16px; height: 14px;margin-top: 11px;margin-right: 10px;" mode=""></image>
					</view>
				</view>
				<view class="lst" style="background: #fff;">
					<uni-text style="display: block;margin-top: 25px;">跟单比例数/固定跟单数</uni-text>
					<input type="number" v-model="query.nums" style="text-align: center; border-bottom:2px solid #4680b0;height: 40px;margin-top: 20px;box-sizing: border-box;" />
				</view>
			</view>
			<view class="clue" v-if="gtype==2" style="padding: 0 15px;">
				
				<view class="" style="line-height: 35px;height: 35px;margin-top: 22px;" @tap="nowid=5;open()">
					<span style="display: block;float: left;width: 80px;text-align: left;">合约</span>
					<view class="" style="float: left;height: 35px;border: 1px solid #e4e4e4;width: calc(100% - 85px);box-sizing: border-box;text-indent: 10px;">
						<text>{{items3.name}}</text>
						<image src="/static/img/xiala.png" style="float: right;width: 16px; height: 14px;margin-top: 11px;margin-right: 10px;" mode=""></image>
					</view>
				</view>
				<view class="" style="line-height: 35px;height: 35px;margin-top: 22px;" @tap="nowid=6;open()">
					<span style="display: block;float: left;width: 80px;text-align: left;">策略</span>
					<view class="" style="float: left;height: 35px;border: 1px solid #e4e4e4;width: calc(100% - 85px);box-sizing: border-box;text-indent: 10px;">
						<text>{{items4.name}}</text>
						<image src="/static/img/xiala.png" style="float: right;width: 16px; height: 14px;margin-top: 11px;margin-right: 10px;" mode=""></image>
					</view>
				</view>
				<view class="" style="line-height: 35px;height: 35px;margin-top: 22px;cursor: not-allowed;">
					<span style="display: block;float: left;width: 80px;text-align: left;">跟单方向</span>
					<view class="" style="float: left;height: 35px;border: 1px solid #e4e4e4;width: calc(100% - 85px);box-sizing: border-box;text-indent: 10px;">
						<text>{{items4.lst[ceid].direction == 1?'正向':'反向'}}</text>
						<!-- <image src="/static/img/xiala.png" style="float: right;width: 16px; height: 14px;margin-top: 11px;margin-right: 10px;" mode=""></image> -->
					</view>
				</view>
				<view class="" style="line-height: 35px;height: 35px;margin-top: 22px;cursor: not-allowed;">
					<span style="display: block;float: left;width: 80px;text-align: left;">倍投参数</span>
					<view class="" style="float: left;height: 35px;border: 1px solid #e4e4e4;width: calc(100% - 85px);box-sizing: border-box;text-indent: 10px;">
						<text>{{items4.lst[ceid].doubleThrowParam}}</text>
						<!-- <image src="/static/img/xiala.png" style="float: right;width: 16px; height: 14px;margin-top: 11px;margin-right: 10px;" mode=""></image> -->
					</view>
					<!-- <input type="text" :value="items4.lst[ceid].doubleThrowParam"  style="float: left;height: 35px;border: 1px solid #e4e4e4;width: calc(100% - 85px);box-sizing: border-box;text-indent: 10px;"/> -->
				</view>
				<view class="" style="line-height: 35px;height: 35px;margin-top: 22px;cursor: not-allowed;">
					<span style="display: block;float: left;width: 80px;text-align: left;">跟随条件</span>
					<view class="" style="float: left;height: 35px;border: 1px solid #e4e4e4;width: calc(100% - 85px);box-sizing: border-box;text-indent: 10px;">
						<text>{{items4.lst[ceid].startIsProfit == 1?'盈利':'亏损'}}</text>
						<!-- <image src="/static/img/xiala.png" style="float: right;width: 16px; height: 14px;margin-top: 11px;margin-right: 10px;" mode=""></image> -->
					</view>
				</view>
				
				<view class="" style="line-height: 35px;height: 35px;margin-top: 22px;cursor: not-allowed;">
					<span style="display: block;float: left;width: 160px;text-align: left;">连续亏损/盈利系数</span>
					<view class="" style="float: left;height: 35px;border: 1px solid #e4e4e4;width: calc(100% - 165px);box-sizing: border-box;text-indent: 10px;">
						<text>{{items4.lst[ceid].startProfitCount}}</text>
						<!-- <image src="/static/img/xiala.png" style="floa t: right;width: 16px; height: 14px;margin-top: 11px;margin-right: 10px;" mode=""></image> -->
					</view>
					<!-- <input type="number" :value="items4.lst[ceid].startProfitCount" style="float: left;height: 35px;border: 1px solid #e4e4e4;width: calc(100% - 165px);box-sizing: border-box;text-indent: 10px;"/> -->
				</view>
				<view class="" style="line-height: 35px;height: 35px;margin-top: 22px;" @tap="nowid=7;open()">
					<span style="display: block;float: left;width: 80px;text-align: left;">状态</span>
					<view class="" style="float: left;height: 35px;border: 1px solid #e4e4e4;width: calc(100% - 85px);box-sizing: border-box;text-indent: 10px;">
						<text>{{items5.name}}</text>
						<image src="/static/img/xiala.png" style="float: right;width: 16px; height: 14px;margin-top: 11px;margin-right: 10px;" mode=""></image>
					</view>
				</view>
			</view>
			<button v-if="gtype==1" type="default" style="width: calc(100% - 30px);margin-left: 15px;margin-top: 40px; background: #1376f7;color: #fff;" @tap="besub(true)">确认订阅</button>
			<button v-else type="default" style="width: calc(100% - 30px);margin-left: 15px;margin-top: 40px; background: #1376f7;color: #fff;" @tap="besub()">确认订阅</button>
		</view>
		
		
		<uni-popup type="bottom" ref="popup">
			<view style="height: 250px;background: #fff;position: relative;" class="popups">
				<p class="poptop" style="border: 1px solid #E4E7ED;">
					<button
						type="default"
						@tap="
							close();
							resure();
						"
					>
						取消
					</button>
					<button
						type="default"
						@tap="
							close();
							sure();
						"
					>
						确定
					</button>
				</p>
				<view class="uni-list toplst">
					<radio-group @change="radioChange($event,'inititems')" style="padding-left: 10px;height: 100%;" v-if="nowid==1">
						<label  style="display: block;overflow: hidden;" class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in inititems.lst" :key="item.value">
							<view style="float: left;margin-left: 10px;margin-right: 3px;">
								<radio :value="item.value" :checked="index === inititems.idx" />
							</view>
							<view style="float: left; font-size: 16px;margin-top:1px;">{{item.name}}</view>
						</label>
					</radio-group>
					<radio-group @change="radioChange($event,'items')" style="padding-left: 10px;height: 100%;" v-if="nowid==2">
						<label  style="display: block;overflow: hidden;" class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items.lst" :key="item.value">
							<view style="float: left;margin-left: 10px;margin-right: 3px;">
								<radio :value="item.value" :checked="index === items.idx" />
							</view>
							<view style="float: left; font-size: 16px;margin-top:1px;">{{item.name}}</view>
						</label>
					</radio-group>
					<radio-group @change="radioChange($event,'items1')" style="padding-left: 10px;height: 100%;" v-if="nowid==3">
						<label  style="display: block;overflow: hidden;" class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items1.lst" :key="item.value">
							<view style="float: left;margin-left: 10px;margin-right: 3px;">
								<radio :value="item.value" :checked="index === items1.idx" />
							</view>
							<view style="float: left; font-size: 16px;margin-top:1px;">{{item.name}}</view>
						</label>
					</radio-group>
					<radio-group @change="radioChange($event,'items2')" style="padding-left: 10px;height: 100%;" v-if="nowid==4">
						<label  style="display: block;overflow: hidden;" class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items2.lst" :key="item.value">
							<view style="float: left;margin-left: 10px;margin-right: 3px;">
								<radio :value="item.value" :checked="index === items2.idx" />
							</view>
							<view style="float: left; font-size: 16px;margin-top:1px;">{{item.name}}</view>
						</label>
					</radio-group>
					<radio-group @change="radioChange($event,'items3')" style="padding-left: 10px;height: 100%;" v-if="nowid==5">
						<label  style="display: block;overflow: hidden;" class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items3.lst" :key="item.value">
							<view style="float: left;margin-left: 10px;margin-right: 3px;">
								<radio :value="item.value" :checked="index === items3.idx" />
							</view>
							<view style="float: left; font-size: 16px;margin-top:1px;">{{item.name}}</view>
						</label>
					</radio-group>
					<radio-group @change="radioChange($event,'items4')" style="padding-left: 10px;height: 100%;" v-if="nowid==6">
						<label  style="display: block;overflow: hidden;" class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items4.lst" :key="item.value">
							<view style="float: left;margin-left: 10px;margin-right: 3px;">
								<radio :value="item.value" :checked="index === items4.idx" />
							</view>
							<view style="float: left; font-size: 16px;margin-top:1px;">{{item.name}}</view>
						</label>
					</radio-group>
					<radio-group @change="radioChange($event,'items5')" style="padding-left: 10px;height: 100%;" v-if="nowid==7">
						<label  style="display: block;overflow: hidden;" class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items5.lst" :key="item.value">
							<view style="float: left;margin-left: 10px;margin-right: 3px;">
								<radio :value="item.value" :checked="index === items5.idx" />
							</view>
							<view style="float: left; font-size: 16px;margin-top:1px;">{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			obj: {},
			gtype:1,
			nowid:0,
			ftype:0,
			shipandata:[],
			ceid:0,
			query: {
				userId: '',
				dealerAccountId: '',
				nums: 1,
				followType: 2,
				onlyLongOrShort:0,
				positiveAndNegative: -1,
				name:''
			},
			query1: {
				DealerAccount: '',
				ContractName: '',
				StrategyId: 1,
				Uid: 2,
				State:1
			},
			inititems: {
				lst:[
					
				],
				idx:0,
				name:''
			},
			items: {lst:[
				{name:'正向',value:1},
				{name:'反向',value:-1}
			],idx:1,name:'反向'},
			items1: {lst:[
				{name:'按比例',value:2},
				{name:'按固定手数',value:3}
			],idx:0,name:'按比例'},
			items2: {lst:[
				{name:'不限制',value:0},
				{name:'限制做多',value:1},
				{name:'限制做空',value:2}
			],idx:0,name:'不限制'},
			items3: {lst:[
				
			],idx:0,name:''},
			items4: {lst:[
			],idx:0,name:''},
			items5: {lst:[
				{name:'开启',value:1},
				{name:'关闭',value:0}
			],idx:0,name:'开启'},
		};
	},
	props: {},
	methods: {
		chongtong(id){
			// this.gtype=id;
			uni.showToast({
				title: 'Vip专属！',
				icon: 'none',
				duration: 2000
			});
		},
		getdata(){
			this.getshipan();
			this.getheyue();
			this.getcl();
		},
		sure() {
			//确定
		},
		getshipan: function() { //实盘列表
			var _this = this;
			var json = {
				token: _this.$store.state.user.token
				// accounts:''
			};
			uni.request({
				method: 'get',
				url: _this.$store.state.url1 + '/api/DealerAccount/list?token=' + _this.$store.state.user.token,
				// contentType: "application/json;",
				// data: json,
				success: function(data) {
					data = data.data;
					// console.log(data.data)
					// console.log(data.data)
					if (data.code == 200) {
						for(var i in data.data){
							var o = data.data[i];
							o.value = o.id;
							o.name = o.accountNo;
						}
						// console.log(data.data)
						_this.inititems.lst = data.data;
						_this.inititems.name = data.data[0].accountNo;
						_this.query.dealerAccountId = data.data[0].id;
						_this.query1.DealerAccount = data.data[0].accountNo;
						
					} else {
						// alert(data.msg)
					}
				}
			})
		},
		getheyue: function() { //合约列表
			var _this = this;
			uni.request({
				method: 'post',
				url: _this.$store.state.url1 + '/api/FollowStrategies/GetContractlist?token=' + _this.$store.state.user.token,
				// contentType: "application/json;",
				// data: json,
				success: function(data) {
					data = data.data;
					// console.log(data)
					// console.log(data.data)
					if (data.code == 200) {
						for(var i in data.data){
							var o = data.data[i];
							var obj = {};
							obj.value = o;
							obj.name = o;
							_this.items3.lst.push(obj)
						}
						_this.items3.name = _this.items3.lst[0].name;
						_this.query1.ContractName = _this.items3.lst[0].name;
						_this.query1.ContractName = _this.query1.ContractName.replace(' ','_').replace(' ','_');
					} else {
						// alert(data.msg)
					}
				}
			})
		},
		getcl: function() { //策略列表
			var _this = this;
			uni.request({
				method: 'post',
				url: _this.$store.state.url1 + '/api/FollowStrategies/GetTacticsDesclist?token=' + _this.$store.state.user.token,
				// contentType: "application/json;",
				// data: json,
				success: function(data) {
					data = data.data;
					// console.log(data)
					// console.log(data.data)
					if (data.code == 200) {
						for(var i in data.data){
							var o = data.data[i];
							o.value = o.id;
						};
						_this.items4.lst = data.data;
						_this.items4.name = _this.items4.lst[0].name;
						_this.query1.StrategyId = _this.items4.lst[0].id;
					} else {
						// alert(data.msg)
					}
				}
			})
		},
		besub(type){
			var _this =this;
			uni.showModal({
				title: '订阅提醒',
				content: '此交易员存在持仓，此订阅会在交易员平仓之后，才开始生效！',
				success: (ee) => {
					if (ee.confirm) {
						_this.sub(type)
					}
				}
			})	
		},
		sub(type){
			if(type){
				var obj = this.query;
				
				this.getdatas({
					type:'GET',
					url: this.$store.state.url1 + '/api/FollowSetting/AddSheQuAppRATIOFollow?token=' + this.$store.state.user.token + '&userId=' + obj.userId +
									'&dealerAccountId=' + obj.dealerAccountId +
									'&nums=' + obj.nums + '&followType=' + obj.followType + '&onlyLongOrShort=' + obj.onlyLongOrShort +
									'&positiveAndNegative=' + obj.positiveAndNegative,
					fun: function(data) {
						// console.log(data.data)
						if (!data.data) return console.log('/api/TraderAnalysis3/GetTrderDealAnalysisInfo');
						if(data.data.code == 200){
							uni.showToast({
								title: '订阅成功！',
								icon: 'none',
								duration: 2000
							});
							setTimeout(function(){
								uni.navigateTo({
									url: '/pages/kong/kong'
								});
							},2000)
							
						}else{
							uni.showToast({
								title: data.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					}
				});
				return;
			};
			var obj1 = this.query1;
			// console.log(this.$store.state.url1 + '/api/FollowStrategies/AddFollowStrategy?token=' + this.$store.state.user.token + '&DealerAccount=' + obj1.DealerAccount + '&ContractName=' + obj1.ContractName + '&StrategyId=' + obj1.StrategyId + '&Uid='+obj1.Uid+'&State='+obj1.State)
			this.getdatas({
				type: 'POST',
				url: this.$store.state.url1 + '/api/FollowStrategies/AddFollowStrategy?token=' + this.$store.state.user.token + '&DealerAccount=' + obj1.DealerAccount + '&ContractName=' + obj1.ContractName + '&StrategyId=' + obj1.StrategyId + '&Uid='+obj1.Uid+'&State='+obj1.State,
				fun: function(data) {
					// console.log(data)
					if(data.data.code == 200){
						uni.showToast({
							title: '订阅成功！',
							icon: 'none',
							duration: 2000
						});
						setTimeout(function(){
							uni.navigateTo({
								url: '/pages/kong/kong'
							});
						},2000)
						
					}else{
						uni.showToast({
							title: data.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}
			});
			
		},
		resure() {
			//取消
		},
		open() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		radioChange(evt,name) {
			for (let i = 0; i < this[name].lst.length; i++) {
				if (this[name].lst[i].value === evt.detail.value) {
					console.log(i)
					this[name].idx = i;
					break;
				}
			}
			if(this.nowid ==1){
				this.query.dealerAccountId = evt.detail.value;
				for(var i in this[name].lst){
					if(this[name].lst[i].id == evt.detail.value){
						this[name].name = this[name].lst[i].name ;
						this.query1.dealerAccount = this[name].lst[i].accountNo;
						break;
					}
				}
			}
			if(this.nowid == 2){
				this.query.positiveAndNegative = evt.detail.value;
				if(evt.detail.value == 1){this[name].name = '正向'}else{this[name].name = '反向'}
			}
			if(this.nowid == 3){
				this.query.followType = evt.detail.value;
				if(evt.detail.value == 2){this[name].name = '按比例'}else{this[name].name = '按固定手数'}
			}
			if(this.nowid == 4){
				this.query.onlyLongOrShort = evt.detail.value;
				if(evt.detail.value == 0){this[name].name = '不限制'}else if(evt.detail.value == 1){this[name].name = '限制做多'}else{this[name].name = '限制做空'}
			}
			if(this.nowid == 5){
				this.query1.ContractName = evt.detail.value;
				this.query1.ContractName = this.query1.ContractName.replace(' ','_').replace(' ','_');
				for(var i in this[name].lst){
					if(this[name].lst[i].value == evt.detail.value){
						this[name].name = this[name].lst[i].name ;
					}
				}
			}
			if(this.nowid == 6){
				this.query1.StrategyId = evt.detail.value;
				for(var i in this[name].lst){
					if(this[name].lst[i].value == evt.detail.value){
						this.ceid = i;
						this[name].name = this[name].lst[i].name ;
					}
				}
			}
			if(this.nowid == 7){
				this.query1.State = evt.detail.value;
				for(var i in this[name].lst){
					if(this[name].lst[i].value == evt.detail.value){
						this[name].name = this[name].lst[i].name ;
					}
				}
			}
			this.close()
			// console.log(evt.detail.value,this[name].name)
		}
	},
	onShow() {
		
		this.height = uni.getSystemInfoSync().windowHeight-40;
		var _this = this;
		uni.getNetworkType({
			success: function(res) {
				if (res.networkType == 'none') {
					uni.showToast({
						title: '当前无网络连接，请检查！',
						icon: 'none',
						duration: 5000
	
						// position:'top'
					});
				}
			}
		});
		uni.onNetworkStatusChange(function(res) {
			if (!res.isConnected) {
				uni.showToast({
					title: '当前无网络连接，请检查！',
					icon: 'none',
					duration: 3000
					// position:'top'
				});
			} else {
				uni.showToast({
					title: '网络已连接！',
					icon: 'none',
					duration: 3000
					// position:'top'
				});
				_this.getdata();
			}
		});
		if (_this.setdata) {
			for (var i in _this.setdata) {
				var is = _this.setdata[i];
				_this.shisetdata[i] = is;
			}
		}
		this.getdata();
	},
	mounted() {},
	onLoad(e) {
		this.obj = JSON.parse(e.obj);
		this.query.userId = this.obj.traderUid;
		this.query1.Uid = this.obj.traderUid;
	}
};
</script>

<style>
.uni-list-cell {
	justify-content: flex-start;
	padding: 10px 0;
	border-bottom: 1px solid #e4e7ed;
	font-size: 14px;
}
.poptop {
	overflow: hidden;
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
}
.toplst {
	height: 210px;
	overflow: scroll;
	position: absolute;
	top: 45px;
	width: 100%;
}
.poptop uni-button {
	float: left;
	line-height: unset;
	background: none;
	border: 0;
	padding: 10px 20px;
	font-size: 16px;
}
.poptop uni-button::after {
	border: 0;
}
.poptop uni-button:first-of-type {
	float: left;
	color: #666;
}
.poptop uni-button:last-of-type {
	float: right;
	color: rgb(0, 129, 240);
}
.top{
	display: flex;
	flex-direction: row;
	background: #fff;
	overflow: hidden;
	line-height: 50px;
	height: 50px;
}
.top>*{
	flex: 1;
}
.top>* span{
	display: block;
	width: 15px;
	height: 15px;
	border: 3px solid #e5e5e5;
	border-radius: 50%;
	float: left;
	
	margin-top: 18px;
	margin-right: 5px;
	box-sizing: border-box;
}
.top>*.active span{
	border: 4px solid #168deb;
}
</style>
